<template>
  <div class="cart">
    <!-- 导航 -->
    <nav-bar class="navbar">
      <div slot="center" >购物车({{cartNum}})</div>
    </nav-bar>
    <!-- 购物车商品列表 -->
    <better-scroll class="content" ref="scroll">
      <cart-list :carGoods = "carGoods"></cart-list>
    </better-scroll>
    <!-- 计算导航 -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>

import NavBar from 'components/common/navbar/NavBar.vue'

import cartBottomBar from './chilComps/cartBottomBar.vue'
import cartList from './chilComps/cartList.vue'

// import { mapGetters } from 'vuex'
import betterScroll from 'components/common/scroll/betterScroll.vue'

export default {
  name: 'cart',
  components:{
    NavBar,
    betterScroll,
    cartList,
    cartBottomBar
  },
  data(){
        return{
            carGoods:[],
        }
  },
  activated(){
        this.carGoods=this.$store.state.carGoods;
        this.$refs.scroll.scroll.refresh();
  },
  computed:{
    cartNum(){
      return this.$store.state.carGoods.length;
    }
  }
}
</script>

<style scoped>

.cart{
  height: 100vh;
}

  .navbar{
    background-color: yellow;
    color: MediumBlue;
    font-weight: 700;
    font-size: 18px;
  }

  .content{
    height: calc(100% - 99px);
    overflow: hidden;
  }
</style>